<template>
  <custom-window :title="title">
    <div slot="header-right">
      <div class="r-date">
        <el-date-picker :append-to-body="false" v-model="dateValue" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
          value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDate" :clearable="false" range-separator="~"></el-date-picker>
      </div>
    </div>
    <div class="content">
      <div class="echart" id="chart6"></div>
    </div>
  </custom-window>
</template>

<script>
import CustomWindow from '@/components/CustomWindow'
import minxin from '@/utils/mixin'
export default {
  mixins: [minxin],
  name: 'CardItem6',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomWindow
  },
  data () {
    return {
      dateValue: []

    }
  },
  computed: {
  },
  watch: {
  },
  created () {
    const endDate = this.$dayjs(new Date()).format('YYYY-MM-DD')
    const startDate = this.$dayjs().subtract(6, 'day').format('YYYY-MM-DD')
    this.dateValue = [startDate, endDate]
    this.getData().then(() => {
      this.initTimer()
    })
  },
  mounted () {
    // this.initChart()
  },
  beforeDestroy () {
    clearInterval(this._timer)
  },
  methods: {
    initTimer () {
      this._timer = setInterval(this.getData, 60 * 60 * 1000)
    },
    getData () {
      return this.$axios.get(this.$apis.screen.selectYgInfoDayList, {
        startTime: this.dateValue[0],
        endTime: this.dateValue[1]
      }).then(res => {
        console.log('res2: ', res)
        if (res) {
          this.initChart(res)
        }
      })
    },
    changeDate (val) {
      console.log('val: ', val)
      this.getData()
    },
    initChart (data) {
      const legendData = data.ygCode || []

      const dateDate = data.date || []
      const seriesData = []
      if (data.ygCode) {
        for (let i = 0; i < data.ygCode.length; i++) {
          const item = {
            name: data.ygCode[i],
            type: 'line',
            stack: 'Total',
            data: data[data.ygCode[i]]
          }
          seriesData.push(item)
          console.log('seriesData: ', seriesData)
        }
      }
      this.$nextTick(() => {
        const chart = this.$getChartInstance('#chart6')
        const options = {
          title: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: '#0082CF70',
            borderColor: '#2880FF',
            borderWidth: 1,
            textStyle: {
              color: '#fff',
              fontSize: this.$px2vw(14)
            }
          },
          legend: {
            data: legendData,
            right: 10,
            top: 2,
            textStyle: {
              color: '#fff',
              fontSize: this.$px2vw(14)
            },
            itemWidth: 10,
            itemHeight: 10,
            type: 'scroll',
            orient: 'horizontal',
            itemGap: 14
          },
          grid: {
            left: '4%',
            right: '4%',
            bottom: '4%',
            top: '16%',
            containLabel: true
          },

          xAxis: {
            type: 'category',
            data: dateDate,
            axisLine: {
              lineStyle: {
                color: '#0A476E'

              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$px2vw(12)
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            name: '吨',
            nameTextStyle: {
              color: '#ffffff70',
              fontSize: this.$px2vw(14),
              verticalAlign: 'middle',
              align: 'center'
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#0A476E'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$px2vw(12)
              }
            }
          },
          series: seriesData
          // [
          //   {
          //     name: '大豆油',
          //     type: 'line',
          //     stack: 'Total',
          //     data: [120, 132, 101, 134, 90, 230, 210]
          //   },

          // ]
        }
        chart.clear()
        chart.setOption(options)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: 100%;

  .echart {
    height: 100%;
  }
}

.r-date {
  ::v-deep .el-date-editor.el-range-editor {
    border: 1px solid #04577e;
    height: 38px;
    background-color: transparent;
    padding-right: 0px;

    border-radius: 4px;
    width: 266px;

    .el-input__inner,
    .el-range-input {
      background-color: transparent;
      border: none;
      text-align: center;
      color: #63bdf1;
      font-size: 16px;
      display: flex;
      align-items: center;
      line-height: 38px;
      justify-content: center;
      height: 100%;
      padding-right: 2px;
    }

    .el-input__prefix,
    .el-input__icon {
      color: #63bdf1;
      transform: translateY(-1px);
      font-size: 14px;

    }

    .el-range-separator {
      color: #63bdf1;
      transform: translateX(-4px);
    }

    .el-range__close-icon {
      display: none;
    }
  }
}
</style>
